<template>
<!-- 加入我们 -->
  <div class="produc">
    <div class="produc-banner"></div>
     <div class="container flex-between m40">
      <div class="navigation">
         <div class="navigation-heard">加入我们</div>
          <el-skeleton :rows="30" animated  v-if=" joinus.length<=0" />
        <ul >
          <li v-for="(item, i) in joinus" :key="i"   @click="change(i)" :class="id==i?'atv':''">
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>
      <div class="voyage">
         <el-skeleton :rows="30" animated  v-if=" joinus.length<=0" />
         <div class="voyage-header flex-between-center">
            <span>{{ joinus[id].title }}</span>
            <p>
              {{ joinus[id].isFull }} | {{ joinus[id].positionState }} | 发布时间：{{
                joinus[id].addTime
              }}
            </p>
        </div>
        <div class="voyage-box">
          <div class="join-b">岗位要求</div>
          <div class="join-c" v-html="joinus[id].content">
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../api/index";
export default {
  name: "download",
  data() {
    return {
      joinus:'',
      id: 0
    };
  },

  mounted() {
    api.joinus().then((res) => {
      this.joinus = res.data.data.list;
    });

  },
  methods: {
    change(i){
      this.id = i
    }
  },
};
</script>

